<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '支付成功',
    backgroundColor: '#f5f5f5',
  },
}
</route>

<template>
  <view class="pay-result success">
    <!-- 状态图标 -->
    <wd-icon name="success" size="120rpx" color="#07c160" />

    <!-- 支付结果 -->
    <view class="result-text">
      <text class="title">支付成功</text>
      <text class="amount">¥{{ orderInfo.totalAmount }}</text>
    </view>

    <!-- 订单信息 -->
    <view class="order-info">
      <view class="info-item">
        <text>订单编号：</text>
        <text class="value">{{ orderInfo.orderNo }}</text>
      </view>
      <view class="info-item">
        <text>支付方式：</text>
        <text class="value" v-if="orderInfo.payType === PayTypeEnum.ALIPAY">支付宝</text>
        <text class="value" v-if="orderInfo.payType === PayTypeEnum.WXPAY">微信支付</text>
        <text class="value" v-if="orderInfo.payType === PayTypeEnum.BALANCE">余额</text>
      </view>
      <view class="info-item">
        <text>支付时间：</text>
        <text class="value">{{ orderInfo.paymentTime }}</text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <wd-button type="default" custom-style="flex:1;margin-right:20rpx" @click="navigateToHome">
        返回首页
      </wd-button>
      <wd-button type="primary" custom-style="flex:1" @click="navigateToOrder">查看订单</wd-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { OrderApi } from '@/service/order/order'
import { OrderInfoVo } from '@/service/order/order.d'
import { PayTypeEnum } from '@/service/order/orderEnum.d'
import { ref } from 'vue'

const orderId = ref('')
const paymentTime = ref('')
const orderInfo = ref<OrderInfoVo>({} as OrderInfoVo)
onLoad((options) => {
  console.log(options)

  orderId.value = options.orderId
  paymentTime.value = new Date().toLocaleString()
  OrderApi.getDetail(Number(orderId.value)).then(({ code, data }) => {
    if (code === 200 && data) {
      orderInfo.value = data
    }
  })
})

const navigateToHome = () => {
  uni.switchTab({ url: '/pages/index/index' })
}

const navigateToOrder = () => {
  uni.navigateTo({ url: `/pages/order/detail?orderId=${orderId.value}` })
}
</script>

<style lang="scss" scoped>
.pay-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 30rpx;

  .result-text {
    margin: 40rpx 0;
    text-align: center;
    .title {
      display: block;
      margin-bottom: 20rpx;
      font-size: 44rpx;
      color: #333;
    }
    .amount {
      font-size: 56rpx;
      font-weight: bold;
      color: #e4393c;
    }
  }

  .order-info {
    width: 100%;
    padding: 30rpx;
    margin: 40rpx 0;
    background: #fff;
    border-radius: 16rpx;
    .info-item {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 0;
      font-size: 28rpx;
      color: #666;
      border-bottom: 1rpx solid #eee;
      &:last-child {
        border: none;
      }
      .value {
        color: #333;
      }
    }
  }

  .action-buttons {
    display: flex;
    gap: 20rpx;
    width: 100%;
    margin-top: 60rpx;
  }
}
</style>
